<!-- 63 -->
<template>
  <div  class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      group="Rework"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
    <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId">
        <a-select
          v-model:value="queryForm.shopId"
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
       <a-form-item :label="$t('T9_cstId')" name="cstId" prop="cstId">
       <a-input  class="t9-form-wideget-input-default" v-model:value="queryForm.cstId"   :placeholder="$t('common_pleaseEnter1')"/>
      </a-form-item>
      <a-form-item :label="$t('T9_glassId')" name="glassId" prop="glassId">
       <a-input  class="t9-form-wideget-input-default" v-model:value="queryForm.glassId"   :placeholder="$t('common_pleaseEnter1')"/>
      </a-form-item>
    </t-query-form>
      <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstInfo")
      }}</a-col>
    </a-row>
    <div>
      <t-table align="center" :loading="searchBtnLoading" :data="list.tableData"  max-height="100%">
      <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="route" :title="$t('T9_route')" />
      <t-column min-width="100" field="operatin" :title="$t('T9_operatin')" />
      <t-column min-width="100" field="state" :title="$t('T9_state')" />
      <t-column min-width="100" field="processState" :title="$t('T9_processState')" />
      <t-column min-width="100" field="holdState" :title="$t('T9_holdState')" />
      <t-column min-width="100" field="glassPanelQty" :title="$t('T9_glassPanelQty')" />
      <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
    </t-table>
    </div>
  <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_glassList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" :loading="glassListLoading"  @click="cstInfoExport" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table">
    <t-table align="center"  :data="list.glassData"  max-height="100%" @checkbox-change="hanldeCheckGlassList" >
      <t-column type="checkbox" width="50"></t-column>
      <t-column min-width="100" field="slot" :title="$t('T9_slot')" />
      <t-column min-width="100" field="glassId" :title="$t('T9_glassId')" />
      <t-column min-width="100" field="glassGrade" :title="$t('T9_glassGrade')" />
      <t-column min-width="100" v-if="queryForm.shopId === 'ARRAY'" field="department" :title="$t('T9_department')" />
      <t-column min-width="100" v-if="queryForm.shopId === 'ARRAY'" field="reasonCodeCategory" :title="$t('T9_reasonCodeCategory')" />
      <t-column min-width="100" field="reasonCode" :title="$t('T9_reasonCode')" />
      <t-column min-width="100" v-if="queryForm.shopId !== 'ARRAY'" field="panelDefectCodes" :title="$t('T9_panelDefectCodes')" />
      <t-column min-width="100" field="desc" :title="$t('T9_desc')" />
      <t-column min-width="100" v-if="queryForm.shopId === 'ARRAY'" field="causeEqId" :title="$t('T9_causeEqId')" />
    </t-table>
   </div>
    <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
       <a-form-item :label="$t('T9_reworkRoute')" name="reworkRoute">
            <a-select  class="t9-form-wideget-input-default" v-model:value="dataForm.reworkRoute"  @change="getRouteDesc" allow-clear show-search :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in dataFormArr.routeArr"
              :key="item.reworkRoute" :value="item.reworkRoute" :prdesc="item.desc">
              {{item.reworkRoute}}
              </a-select-option>
            </a-select>
          </a-form-item>
        <a-form-item :label="$t('T9_desc')" name="desc">
            <a-input class="t9-form-wideget-input-default" v-model:value="dataForm.desc" :disabled="true" />
          </a-form-item>
       <a-form-item :label="$t('T9_reworkCode')" name="reworkCode">
        <a-select
          v-model:value="dataForm.reasonCodeCategory"
          allow-clear
          show-search
          class="t9-form-wideget-input-default"
          style="margin-right: 10px"
          :placeholder="$t('common_pleaseSelect')"
        >
          <a-select-option
            v-for="item in dataFormArr.reworkCodeCategoryArr"
            :key="item.reasonCodeCategory"
            :value="item.reasonCodeCategory"
            >{{ item.reasonCodeCategory }}</a-select-option
          >
        </a-select>
          <a-select
          v-model:value="dataForm.reworkCode"
          allow-clear
          show-search
          class="t9-form-wideget-input-default"
          style="margin-right: 10px"
          @change="getReworkCodeDesc"
          :placeholder="$t('common_pleaseSelect')"
        >
          <a-select-option
            v-for="item in dataFormArr.reworkCodeArr"
            :key="item.reasonCode"
            :value="item.reasonCode"
            :prdesc="item.desc"
            >{{ item.reasonCode }}</a-select-option
          >
        </a-select>
        <a-input disabled v-model:value="dataForm.reasonCodeDesc" class="t9-form-wideget-input-default" />
      </a-form-item>
            <a-form-item  v-if="queryForm.shopId === 'ARRAY'" :label="$t('T9_bayId')" name="bayId">
              <a-select
              v-model:value="dataForm.bayId"
              allow-clear
              show-search
              class="t9-form-wideget-input-default"
              @change="getReasonCodeDesc"
              :placeholder="$t('common_pleaseSelect')"
              >
              <a-select-option
               v-for="item in options.bayIdList"
               :key="item.value"
               :value="item.value"
              >{{ item.value }}</a-select-option
          >
        </a-select>
            </a-form-item>
            <a-form-item v-if="queryForm.shopId === 'ARRAY'" :label="$t('T9_causeEqpId')" name="causeEqpId">
              <a-select
              v-model:value="dataForm.causeEqpId"
              allow-clear
              show-search
              class="t9-form-wideget-input-default"
             @change="getReasonCodeDesc"
              :placeholder="$t('common_pleaseSelect')"
              >
              <a-select-option
               v-for="item in dataFormArr.causeEqpIdArr"
               :key="item.causeEqpId"
               :value="item.causeEqpId"
               :prdesc="item.desc"
              >{{ item.causeEqpId }}</a-select-option
          >
        </a-select>
            </a-form-item>
          <a-form-item :label="$t('T9_comment')" class="comment-box" name="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" :rows="1" :title="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button :loading="confirmLoading" class="t9-form-wideget-btn-default" type="primary" @click="handleConfirm">{{ $t('T9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
   import confirmUserMixin from '@/mixins/confirmUser.mixin'
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'Rework',
    mixins: [initOptionsMixin, confirmUserMixin],
    data() {
      return {
        searchBtnLoading: false,
        glassListLoading: false,
        confirmLoading: false,
        export: false,
        list: {
          tableData: [],
          glassData: []
        },
        glassList: [],
        queryForm: {
          shopId: 'ARRAY',
          cstId: undefined,
          glassId: undefined
        },
        dataForm: {
         reworkRoute: undefined,
         desc: undefined,
         reworkCode: undefined,
         reasonCodeCategory: undefined,
         reasonCodeDesc: undefined,
         bayId: undefined,
         causeEqpId: undefined
        },
        dataFormArr: {
          routeArr: [],
          reworkCodeCategoryArr: [],
          reworkCodeArr: [],
          causeEqpIdArr: []
        },
        options: {
          shopIdList
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          reworkRoute: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          bayId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          eventComment: [
            { required: true, message: this.$t('valid_required'), trigger: 'blur' },
            { max: 500, message: this.$t('changePoint_maxLength', { n: 500 }), trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.dataForm.reworkRoute = undefined
          this.dataForm.desc = undefined
          this.dataForm.reworkCode = undefined
          this.dataForm.reasonCodeCategory = undefined
          this.dataForm.reasonCodeDesc = undefined
          this.dataForm.bayId = undefined
          this.dataForm.causeEqpId = undefined
          if (shopId === 'ARRAY') {
             this.getReworkCauseEqpId()
             this.initOptions([{ name: 'bayId', params: { version: '80006', shopId: this.queryForm.shopId } }])
          }
          if (this.list.tableData.length) {
             this.getReworkRoute()
          }
          this.getReworkReasonCodeCategory()
        },
        immediate: true
      },
      'dataForm.reasonCodeCategory': {
        handler() {
           this.getReworkReasonCode()
          this.dataForm.reworkCode = undefined
          this.dataForm.reasonCodeDesc = undefined
        }
      }
    },
    created() {
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            this.getCstInfo()
            this.getGlassList()
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
      getCstInfo() {
           const params = {
             ...this.queryForm,
             dtoName: 'LotInfoDTO',
             queryId: 'GetLotInfo',
             version: '80045',
             menuName: 'rework',
             usage: 'getCstInfo',
             site: 'T7'
            }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
      },
      getGlassList() {
            const obj = {
             ...this.queryForm,
             queryId: 'GetProductList',
             version: this.queryForm.shopId === 'CF' ? '90013' : '90034',
             menuName: 'rework',
             usage: 'getGlassList',
             site: 'T7',
             export: this.export
            }
            api
              .getList(obj)
              .then((res) => {
                if (this.export) {
                  downloadBlobFile(res, 'glassList')
                  this.export = false
                  this.glassListLoading = false
                } else {
                this.list.glassData = res
                this.searchBtnLoading = false
                }
              })
              .catch((error) => {
                this.searchBtnLoading = false
                this.export = false
                this.glassListLoading = false
                console.error(error)
              })
       },
       glassListExport() {
         if (!this.list.glassData.length) return
         if (this.glassListLoading) return
         this.export = true
         this.getGlassList()
       },
       getReworkRoute() {
         const params = {
            dtoName: 'ReworkReworkRouteDTO',
            queryId: 'GetProcessFlowList',
            version: this.queryForm.shopId === 'CF' ? '80004' : '80034',
            menuName: 'rework',
            usage: 'getReworkRoute',
            operation: this.list.tableData[0].operation,
            operationName: '',
            processFlowType: 'REWORK',
            shopId: this.queryForm.shopId,
            route: this.list.tableData[0].route
         }
         api.getList(params).then(res => {
           this.dataFormArr.routeArr = res
         })
       },
       getReworkReasonCodeCategory() {
         const params = {
            dtoName: 'ReworkReworkReasonCodeCategoryDTO',
            queryId: 'GetReasonCodeList',
            version: '80001',
            menuName: 'rework',
            usage: 'getResonCodeCategroy',
            reasonCodeType: 'REWORK',
            shopId: this.queryForm.shopId
         }
         api.getList(params).then(res => {
           this.dataFormArr.reworkCodeCategoryArr = res
         })
       },
       getReworkReasonCode() {
          const params = {
            dtoName: 'ReworkReworkCodeDTO',
            queryId: 'GetReasonCodeList',
            version: '80006',
            menuName: 'rework',
            usage: 'getReasonCode',
            reasonCodeType: 'REWORK',
            reasonCodeCategory: this.dataForm.reasonCodeCategory,
            shopId: this.queryForm.shopId
         }
         api.getList(params).then(res => {
           this.dataFormArr.reworkCodeArr = res
         })
       },
         getReworkCauseEqpId() {
          const params = {
            dtoName: 'ReworkCauseEqpIdDTO',
            queryId: 'GetMachineList',
            version: '81005',
            menuName: 'rework',
            usage: 'getCauseEqpId',
            detailMachineType: 'MAIN',
            shopId: this.queryForm.shopId,
            bayId: this.dataForm.bayId
         }
         api.getList(params).then(res => {
           this.dataFormArr.causeEqpIdArr = res
         })
       },
       getRouteDesc(val, o) {
         this.dataForm.desc = o.prdesc
       },
       getReworkCodeDesc(val, o) {
         this.dataForm.reasonCodeDesc = o.prdesc
       },
       hanldeCheckGlassList(row) {
         this.glassList.push(row)
       },
       handleConfirm() {
         this.$refs.dataForm.validate().then(() => {
           if (this.confirmLoading) return
           this.confirmLoading = true
           if (!this.glassList.length) {
              this.$message.error(this.$t('T9_errTip1'))
              return
           }
            this.confirmUser(this.handleOk)
         }).catch(error => {
           console.log(error)
           this.confirmLoading = false
         })
       },
       handleOk() {
         const params = {
           menuName: 'rework',
           usage: 'confirm',
           causeEqpId: this.dataForm.causeEqpId,
           eventComment: this.dataForm.eventComment,
           eventUser: this.$store.state.user.uid,
           glassList: this.glassList,
           language: 'English',
           lotName: this.list.tableData[0].lotName,
           operation: this.list.tableData[0].operation,
           reasonCode: this.dataForm.reworkCodey,
           reasonCodeType: 'REWORK',
           reworkRoute: this.reworkRoute,
           route: this.list.tableData[0].route,
           shopId: this.queryForm.shopId
         }
         api.confirm(params).then(res => {
           this.confirmLoading = false
           this.getGlassList()
           this.getCstInfo()
           this.glassList = []
           console.log(res)
         }).catch(error => {
           console.log(error)
         })
       }
    }
  })
</script>
<style lang='less' scoped>
</style>
